// sticky.jsx
import Taro, { usePageScroll, getCurrentInstance } from '@tarojs/taro'
import { View } from '@tarojs/components'
import React, { useEffect, useState, useRef } from 'react'
import './index.scss'

const Sticky = (props) => {
    const {
        offsetTop = 0,
        zIndex = 100,
        backgroundColor = '#fff',
        className = '',
        children
    } = props

    const [isSticky, setIsSticky] = useState(false)
    const placeholderRef = useRef(null)
    const containerRef = useRef(null)
    const pageCtxRef = useRef(null)
    const topRef = useRef(0)

    // 获取页面实例
    console.log(isSticky, topRef.current, 'isSticky===========')
    useEffect(() => {
        const instance = getCurrentInstance()
        pageCtxRef.current = instance.page
    }, [])

    // 吸顶样式
    const stickyStyle = {
        position: 'fixed',
        top: offsetTop + 'px',
        left: 0,
        right: 0,
        zIndex,
        backgroundColor
    }

    return (
        <View className={`sticky-container ${className}`}>
            {/* 占位元素防止跳动 */}
            <View
                ref={placeholderRef}
                className='sticky-placeholder'
            />

            {/* 内容容器 */}
            <View
                ref={containerRef}
                className='sticky-content'
                style={stickyStyle}
            >
                {children}
            </View>
        </View>
    )
}

export default Sticky